<template>
	<view class="aiWriting_box">
		<view class="content">
			<view class="textarea">
				<u-textarea maxlength="800" v-model="writing" border="false" placeholderClass="placeClass"
					placeholder="请输入您的文章需求，例如，请写一篇关于春天的文章，800字左右。">
				</u-textarea>
			</view>
			<view class="tools">
				<view class="tools_left">
					<view class="left" @click="delWriting">
						<u-icon name="trash" size="18" color="#999999"></u-icon>
						<text class="text">清除文本</text>
					</view>
				</view>
				<view class="tools_right">
					<text class="text">字数 {{writing.length}}</text>
				</view>
			</view>
		</view>

		<view class="basyel">
			<view class="mast">
				<image src="../../static/fish/pes.png" mode="widthFix" style="height: 30rpx;width: 30rpx;">
				</image>
				<text>示例</text>
			</view>
			<view class="center" v-for="(item,index) in tablist" :key="index" @click="wetImage(item.context)">
				<view class="as">
					{{item.title}}
				</view>
				<view class="bs">
					{{item.context}}
				</view>
				<image src="../../static/fish/cd.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="basyel">
			<view class="mast">
				<image src="../../static/create/bts.png" mode="widthFix" style="height: 31.4rpx;width: 31.4rpx;">
				</image>
				<text>示例</text>
			</view>
			<view class="center" v-for="(item,index) in tablist" :key="index" @click="wetImage(item.context)">
		          <view class="as">
		          	{{item.title}}
		          </view>
				  <text>|</text>
				  <view class="bs">
				  	{{item.context}}
				  </view>
				 <image src="../../static/create/dc.png" mode=""></image>
			</view>
		</view> -->
		<view class="button">
			<view class="button_right">
				<view class="bto" @click="highOriginal">开始生成</view>
			</view>
		</view>
		<view style="width: 100%; height: 31rpx;background-color: #f4f4f4;"></view>
		<!-- 非会员看广告提示 -->
		<u-modal :show="vipShow" :title="'温馨提示'" :content="content" cancelText="取消" confirmText="去开通"
			showCancelButton="true" @cancel="cancel" @confirm="govip" :closeOnClickOverlay="true"
			@close="vipShow = false"></u-modal>
		<!--  进度条  -->
		<view class="schedule-page" v-if="scheduleShow">
			<view class="schedule-box">
				<view class="schedule-text">创作中，请稍后</view>
				<view class="lineBox">
					<view class="lineAnimation" v-for="(item,index) in arrIndex" :key="index"
						:style="{'width':item.width+'%'}">
						<view v-if="item.widthChildren>0" class="lineAnimation-children"
							:style="{'width':item.widthChildren+'%'}"></view>
					</view>
				</view>
				<view class="schedule-number">{{schedule}}%</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		isLogin,
		vipType
	} from '@/business/login.js';
	import {
		wxTextDetection
	} from "../../utils/textCheck.js";
	import {
		wycUrl,
		wycUrlApi,
		sslbiz,
		apiMixUrlApi
	} from '@/api/assemb.js'

	var diff = require('diff');
	let app = getApp();
	export default {
		data() {
			return {
				tablist: [{
						title: '民间故事',
						context: '写一篇民间故事,话题是妖怪'
					},
					{
						title: '带货文案',
						context: '写一篇电动牙刷的带货文案'
					},
					{
						title: '小说创作',
						context: '写一篇以爱情为主题的小说'
					},
				],
				isVip: false,
				content: '您还不是会员,此功能需开通会员才可使用。',
				writing: '',
				creativeResult: '',
				compareResults: [],
				vipShow: false,
				frequencyrs: uni.getStorageSync('frequencyrs'),
				aiLevel: 1,
				originality: 0,
				width: 0,
				arrIndex: [],
				widthIndex: 0,
				schedule: 0,
				scheduleShow: false,
				time: ''
			};
		},
		onShow() {
			this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
			// this.isVip = true;


		},
		onLoad() {
		},
		methods: {
			// getFrequency() {
			// 	apiMixUrlApi({}, 1042, 'GetPaymentInfo').then(data => {
			// 		if (data.descinfo == "success") {
			// 			console.log(data.coins)
			// 			uni.setStorageSync('frequencyrs', data.coins)
			// 		}
			// 	});
			// },
			wetImage(text) {
				this.writing = text
				console.log(text)
			},
			//进度条
			change() {
				this.widthIndex = 0
				this.schedule = 0
				//将每个进度依照字数分段
				this.arrIndex = this.arrIndex.map(item => {
					return {
						...item,
						// 每个进度条的宽度
						width: 100 / (this.arrIndex.length),
						// 每个进度条里面的view宽度用来显示加载进度
						widthChildren: 0
					}
				})
				// 计算总进度
				let sum = () => {
					let number = this.arrIndex.map(item => item.widthChildren).reduce((accumulator, currentValue,
						currentIndex, ) => {
						return accumulator + currentValue;
					})
					this.schedule = parseInt(number / this.arrIndex.length)
				}
				this.time = setInterval(() => {
					if (this.widthIndex == this.arrIndex.length) {
						this.arrIndex[this.widthIndex - 1].widthChildren = 100
						sum()
						clearInterval(this.time)
						setTimeout(() => {
							this.scheduleShow = false
						}, 1000)
					} else if (this.widthIndex > 0 && this.widthIndex < this.arrIndex.length) {
						// 如果是加载了第二个进度 则让上一个进度条伪100%
						this.arrIndex[this.widthIndex - 1].widthChildren = 100
						if (this.arrIndex[this.widthIndex].widthChildren < 99) {
							this.arrIndex[this.widthIndex].widthChildren++
						}
						sum()
					} else {
						if (this.arrIndex[this.widthIndex].widthChildren < 99) {
							this.arrIndex[this.widthIndex].widthChildren++
						}
						sum()
					}

				}, 500)
			},
			/**
			 * 跳转充值页面
			 */
			govip() {
				this.vipShow = false;
				if (uni.getStorageSync('OS') !== 'ios') {
					uni.navigateTo({
						url: '/pages/paymentCenter/paymentCenter'
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '由于相关规范，IOS功能暂不可用',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			cancel() {
				this.vipShow = false;
			},
			async original(param) {
				console.log(this.content)
				await wycUrl(param, 1005, 'chatAzure2').then((res) => {
					if (res.data.code == 400 || res.data.code == 406 || res.data.code == 500) {
						this.scheduleShow = false,
							clearInterval(this.time)
					} else {
						if (!this.isVip) {
							let param = {
								consumecoins: 1,
								descinfo: '一键创作消耗',
								consumetype: 1,
							}
							apiMixUrlApi(param, '1043', "ConsumeCoins").then(result => {
								console.log(result, '1043返回值');
								uni.setStorageSync('frequencyrs', result.coins)
							});
						}
						this.text = res.data.data.results[0].replace(/[\r\n]/g, '')
						let prams = {
							text: this.text,
						};
						console.log(prams)
						sslbiz(prams, "1089", "DYTextCheck").then(async res => {
							console.log(res)
							if (res.hit) {
								uni.showToast({
									title: '返回内容包含敏感词',
									icon: 'none',
									duration: 2000,
								})
								this.scheduleShow = false,
									clearInterval(this.time)
							} else {
								console.log('999999')
								this.creativeResult = this.text
								this.scheduleShow = false,
									clearInterval(this.time)
								uni.navigateTo({
									url: '../creations/creations?creativeResult=' + this
										.creativeResult + '&writing=' + this.writing
								})
							}
						})
						// this.creativeResult += res.data.data.results[0]
						// this.scheduleShow = false,
						// clearInterval(this.time)
						// uni.navigateTo({
						// 	url: '../creations/creations?creativeResult=' + this
						// 		.creativeResult + '&writing=' + this.writing
						// })

					}

				})
			},
			// AI伪原创
			highOriginal() {
				if (this.writing.indexOf("克强") != -1) {
					uni.navigateTo({
						url: '/pages/minGie/minGie'
					})
					this.writing = ''
					return
				}
				this.creativeResult = ''
				if (this.writing.trim() == '') {
					uni.showToast({
						title: '请输入文案',
						duration: 2000,
						icon: 'none',
					});
				} else if (uni.getStorageSync('frequencyrs') > 0 || this.isVip) {
					let prams = {
						text: this.writing,
					};
					sslbiz(prams, "1089", "DYTextCheck").then(async res => {
						if (res.hit) {
							this.writing = ''
							uni.showModal({
								title: '提示',
								content: "检测到敏感关键词或文本为空，请修改后重试！",
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							if (this.writing.trim().length < 400 || this.isVip) {
								let str = this.writing,
									arr = [] //用于保存每次截取后的字符串
								function creatArr(str) {
									var len = str.length
									let newStr = '' //截取之后返回的新字符串

									if (len > 100) {
										newStr = str.substr(0, 100)
										arr.push(newStr)
										str = str.replace(newStr, '')
										creatArr(str)
									} else {
										arr.push(str)
									}
									return arr
								}
								let res = creatArr(str)
								this.arrIndex = arr
								this.scheduleShow = true
								this.change()
								for (var i = 0; i < res.length; i++) {
									console.log("第" + i + "个分割后的字符是：" + res[i]);
									let param = {
										"content": `${res[i]}`
									}
									await this.original(param)
								}
								// this.creativeResults = this.creativeResult.replace(/[\r\n]/g, '')

							} else {
								this.content = '字数超限了,开通会员不限字数。'
								this.vipShow = true
							}
						}
					})

				} else {
					this.content = '今日免费次数已用完,需开通会员才可使用。'
					this.vipShow = true
				}
			},
			// 免费伪原创
			similar(s, t, f) {
				if (!s || !t) {
					return 0
				}
				if (s === t) {
					return 100;
				}
				var l = s.length > t.length ? s.length : t.length
				var n = s.length
				var m = t.length
				var d = []
				f = f || 2
				var min = function(a, b, c) {
					return a < b ? (a < c ? a : c) : (b < c ? b : c)
				}
				var i, j, si, tj, cost
				if (n === 0) return m
				if (m === 0) return n
				for (i = 0; i <= n; i++) {
					d[i] = []
					d[i][0] = i
				}
				for (j = 0; j <= m; j++) {
					d[0][j] = j
				}
				for (i = 1; i <= n; i++) {
					si = s.charAt(i - 1)
					for (j = 1; j <= m; j++) {
						tj = t.charAt(j - 1)
						if (si === tj) {
							cost = 0
						} else {
							cost = 1
						}
						d[i][j] = min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost)
					}
				}
				let res = (1 - (1 - d[n][m] / l)) * 100
				return res.toFixed(f)
			},
			copyResults() {
				uni.setClipboardData({
					data: this.creativeResults,
					showToast: true
				});
			},
			delWriting() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认清除文本',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.writing = ''
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			goTextDetection(writing) {
				console.log('1111111111111111')
				if (writing.trim() == '') {
					uni.showToast({
						title: '请输入文案',
						duration: 2000,
						icon: 'none'
					});
				} else {
					let prams = {
						text: this.writing,
					};
					sslbiz(prams, "1089", "DYTextCheck").then(async res => {
						if (res.hit) {
							uni.showModal({
								title: '提示',
								content: "检测到敏感关键词或文本为空，请修改后重试！",
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							uni.showToast({
								title: '未检测到敏感词',
								icon: 'none'
							})
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-textarea--disabled {
		background-color: #fff !important;
	}

	/deep/.u-textarea {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		height: 300rpx !important;
	}

	/deep/.u-button {
		border-radius: 12rpx !important;
	}

	/deep/.u-icon__icon {
		margin-right: 8rpx !important;
	}

	/deep/.u-checkbox__icon-wrap {
		width: 26rpx !important;
		height: 26rpx !important;
		margin-left: 57rpx;
	}

	/deep/.u-textarea .u-textarea__field {
		line-height: 25px;
	}

	.bto {
		background: linear-gradient(112deg, #f88193 0%, #f1445d 100%);
		box-shadow: 4rpx 12rpx 12rpx 2rpx #ffb4bf;
		width: 580rpx;
		height: 100rpx;
		background-color: rgba(52, 116, 255, 0.3);
		border-radius: 60rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
		margin: auto;
	}

	.basyel {
		margin-top: 20px;

		width: 690rpx;
		height: 506rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(191, 191, 191, 0.31);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		border: 2rpx solid #F5F5F5;

		.center:nth-child(2) {
			border-bottom: 1rpx solid #BFBFBF;
		}

		.center:nth-child(3) {
			border-bottom: 1rpx solid #BFBFBF;
		}



		.center {
			width: 600rpx;
			height: 121rpx;
			/* background: #fff8f9; */
			/* border-radius: 12rpx; */
			margin-left: 40rpx;
			margin-top: 28rpx;
			position: relative;

			image {
				height: 17.15rpx;
				width: 31.89rpx;
				position: absolute;
				top: 50rpx;
				right: 0;
			}

			.as {
				margin-left: 20rpx;
				font-size: 28rpx;
				// color: #f1445d;
			}

			text {
				margin-left: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				// color: #f1445d;
			}

			.bs {

				font-size: 24rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;
				color: #333333;

				color: #828282;
			}
		}

		.mast {
			display: flex;
			margin-left: 50rpx;

			image {
				margin-top: 24rpx;
			}

			text {
				margin-top: 20rpx;
				margin-left: 10rpx;
				font-size: 29rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #332F2F;
			}
		}
	}

	.schedule-page {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: rgba(128, 126, 126, 0.8);
		top: 0px;
		left: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 200;
	}

	.schedule-box {
		width: 82%;
		background-color: #fff;
		border-radius: 15rpx;

	}

	.schedule-text {
		text-align: center;
		line-height: 120rpx;
	}

	.schedule {
		width: 100%;
		height: 20rpx;
		margin: 20rpx 0rpx;
	}

	.schedule-number {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #2979ff;
	}

	.lineBox {
		width: 90%;
		display: flex;
		justify-content: space-around;
		margin: 0px auto;
		height: 12rpx;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.lineAnimation {
		height: 100%;
		background-color: #bbb9b9;
	}

	.lineAnimation-children {
		height: 100%;
		transition: all 0.5s;
		background-color: #2979ff;
	}

	.textarea-placeholder {
		line-height: 30rpx;
	}

	.title {
		line-height: 111rpx;
		margin-left: 268rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		color: #5490FF;
	}

	.result_comparison {
		margin-top: 31rpx;
		margin-bottom: 20rpx;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 18rpx;

		.results_textarea {
			padding: 0 20rpx 20rpx 20rpx;
		}
	}


	.creative_results {
		padding-bottom: 30rpx;
		margin-top: 20rpx;
		width: 696rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		box-sizing: border-box;

		.creative_results_btn {
			margin: auto;
			margin-top: 30rpx;
			width: 333rpx;
		}

	}

	.originality {
		margin-top: 64rpx;

		ul {
			display: flex;

			li {
				display: flex;
				width: 193rpx;
				height: 43rpx;
				font-size: 18rpx;

				.left {
					width: 102rpx;
					height: 43rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 43rpx;
					border-radius: 6rpx 0rpx 0rpx 6rpx;
				}

				.right {
					width: 92rpx;
					height: 43rpx;
					color: #333333;
					text-align: center;
					line-height: 43rpx;
					background-color: #fff;
					border-radius: 0rpx 6rpx 6rpx 0rpx;
				}
			}
		}
	}

	.button {
		margin-top: 62rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.button_left {
			width: 47%;
		}

		.button_right {
			position: relative;
			width: 100%;

			.right_other {
				display: flex;
				align-items: center;
				position: absolute;
				top: -21rpx;
				right: 0;
				width: 154rpx;
				height: 42rpx;
				background: #FF6600;
				border-radius: 21rpx 0rpx 0rpx 21rpx;

				text {
					line-height: 42rpx;
					margin-left: 18rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
		}
	}

	// .textarea {
	// 	height: 722rpx;
	// }

	.text {
		font-size: 19rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.aiWriting_box {
		padding: 0 27rpx;

		.content {
			width: 696rpx;
			// height: 822rpx;
			border-radius: 18rpx;
			background-color: #fff;
		}

		.tools {
			height: 100rpx;
			padding: 0 27rpx;
			display: flex;
			justify-content: space-between;

			.tools_left {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.right {
					margin-left: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.tools_right {
				display: flex;
				align-items: center;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f4f4f4;
	}
</style>